<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ page session="false" %>
<html>
<head>
<title>blog details</title>
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/syntaxhighlighter/styles/shCoreEclipse.css" />" rel="stylesheet" type="text/css" />
<style type="text/css">
.syntaxhighlighter { overflow-y: hidden !important; }
</style>
<script type="text/javascript" src="<c:url value="/resources/javascript/jquery-1.6.1.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/syntaxhighlighter/scripts/shCore.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/syntaxhighlighter/scripts/shAutoloader.js" />"></script>
<!-- 
<script type="text/javascript" src="<c:url value="/resources/syntaxhighlighter/shBrushJava.js" />"></script>
 -->

<script type="text/javascript">
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(document).ready(function() {

	  //ajax get request to fetch all the comments
	  //$.ajax({type: "GET", url: $("#commentForm").attr("action") + "/get", data: {},
	  //    contentType: "application/json", dataType: "json",
	  //    success: function(data) { 
		//      //alert(JSON.stringify(data)); 
	  //      for (var x = 0; x < data.length; x++) {
		//        var commentDiv = "<li class=\"comment-entry\">" +
    //            "<img class=\"avatar\" src=\"" + data[x].avatarLink + "\" height=\"64\" width=\"64\"><div class=\"triangle-left\"></div><div class=\"the-comment\"><div class=\"comment-meta\">"+ data[x].createTimeString +
    //              "</div><div class=\"comment-author\"><a href=\"" + data[x].publisherWebsite + "\">" + data[x].publisherName +
    //               "</a> says:</div><p>" + data[x].content + 
    //              "</p></div></li>";
    //        $("#comments").append(commentDiv);
		//      }
	  //    },
	  //    error: function(xhr) { alert("comment fails!\n" + xhr.responseText); }
	  //});

	  $('.sidebar').load('/ajax/blog-siderbar');
	  $('.comment-list').load('/ajax/comment-list/${blog.id}' );
	  
	  SyntaxHighlighter.autoloader(
			  'applescript            /resources/syntaxhighlighter/scripts/shBrushAppleScript.js',
			  'actionscript3 as3      /resources/syntaxhighlighter/scripts/shBrushAS3.js',
			  'bash shell             /resources/syntaxhighlighter/scripts/shBrushBash.js',
			  'coldfusion cf          /resources/syntaxhighlighter/scripts/shBrushColdFusion.js',
			  'cpp c                  /resources/syntaxhighlighter/scripts/shBrushCpp.js',
			  'c# c-sharp csharp      /resources/syntaxhighlighter/scripts/shBrushCSharp.js',
			  'css                    /resources/syntaxhighlighter/scripts/shBrushCss.js',
			  'delphi pascal          /resources/syntaxhighlighter/scripts/shBrushDelphi.js',
			  'diff patch pas         /resources/syntaxhighlighter/scripts/shBrushDiff.js',
			  'erl erlang             /resources/syntaxhighlighter/scripts/shBrushErlang.js',
			  'groovy                 /resources/syntaxhighlighter/scripts/shBrushGroovy.js',
			  'java                   /resources/syntaxhighlighter/scripts/shBrushJava.js',
			  'jfx javafx             /resources/syntaxhighlighter/scripts/shBrushJavaFX.js',
			  'js jscript javascript  /resources/syntaxhighlighter/scripts/shBrushJScript.js',
			  'perl pl                /resources/syntaxhighlighter/scripts/shBrushPerl.js',
			  'php                    /resources/syntaxhighlighter/scripts/shBrushPhp.js',
			  'text plain             /resources/syntaxhighlighter/scripts/shBrushPlain.js',
			  'py python              /resources/syntaxhighlighter/scripts/shBrushPython.js',
			  'ruby rails ror rb      /resources/syntaxhighlighter/scripts/shBrushRuby.js',
			  'sass scss              /resources/syntaxhighlighter/scripts/shBrushSass.js',
			  'scala                  /resources/syntaxhighlighter/scripts/shBrushScala.js',
			  'sql                    /resources/syntaxhighlighter/scripts/shBrushSql.js',
			  'vb vbnet               /resources/syntaxhighlighter/scripts/shBrushVb.js',
			  'xml xhtml xslt html    /resources/syntaxhighlighter/scripts/shBrushXml.js'  
      );
	  SyntaxHighlighter.all();  

//	  $("#publisherName").blur(function() {
//		  if(!$.trim($(this).val()).length) {
//			  $(this).parents('p').addClass('warning');
//			  $(".error").show();
//		  } else 
//			  $(this).parents('p').removeClass('warning');
//		});

	  $("#commentForm").submit(function() {
		      var errorCount = 0;
		      if(!$.trim($("#publisherName").val()).length) {
		    	  $("#publisherName").parents('p').addClass('warning');
		        errorCount++;
		      }

		      if(!$.trim($("#publisherEmail").val()).length) {
		    	   $("#publisherEmail").parents('p').addClass('warning');
		         errorCount++;
		      }

		      if(!$.trim($("#content").val()).length) {
		    	   $("#content").parents('p').addClass('warning');
		         errorCount++;
		      }

		      if (errorCount > 0) {
		    	  $(".error").show();
		    	  return false;
		    	}
		      
          $('input[type=submit]', this).attr('disabled', 'disabled');
          var form = $(this);  
          //console.log(JSON.stringify(form.serializeObject()));  
          //"{ \"publisherName\": \"liyu\", \"publisherEmail\": \"sense777cn\", \"content\": \"good\" }"    
          $.ajax( {type: "POST", url: form.attr("action"), data: JSON.stringify(form.serializeObject()),
            contentType: "application/json", dataType: "text",
            success: function(comentJson) { 
                var obj = JSON.parse(comentJson);
                //alert(obj.avatarLink);
                var weburl = obj.publisherWebsite;
                var webLink;
                if (!weburl.length) {
                	webLink = obj.publisherName;
                } else {
                	webLink = "<a href=\"" + weburl + "\">" + obj.publisherName + "</a>";
                }
                console.log(webLink);
                var html = "<li class=\"comment-entry\">" +
                      "<img class=\"avatar\" src=\"" + obj.avatarLink + "\" height=\"64\" width=\"64\">"  + 
                      "<div class=\"triangle-left\"></div>" +
                      "<div class=\"the-comment\">" +
                        "<div class=\"comment-meta\">"+ obj.createTimeString + "</div>" +
                        "<div class=\"comment-author\">" +
                           webLink + " says:</div><p>" + obj.content +
                       "</p></div></li>";
                $("#comments").append(html);
                $("#comment-list-wrapper").toggle(true);
                $("#content").val("");
                $('input[type=submit]', form).removeAttr('disabled');
            },
            error: function(xhr) { alert("comment fails!" + xhr.responseText); }
          });
          
          return false;
    });
});
</script>

</head>

<body>
  <div class="wrapper">

    <jsp:include page="templates/banner.jsp"></jsp:include>

    <div class="content">
    
      <div class="main">
      
        <div class="blog-entry">
          <div class="blog-info">
            <div class="entry-title">
              <div class="main-title">
                <a class="title-link" href="#">${blog.title}</a>
              </div>   
              <hr class="separator"/> 
              <div class="entry-info">
                <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${blog.createTime}" /> | 
                categorized in <a href="<c:url value="/blogs/category/${blog.categoryKey}"/>">${blog.categoryKey}</a> |
                tagged in 
                <c:forEach items="${blog.tags}" var="tag">
                  <a href="<c:url value="/blogs/tag/${tag}"/>">${tag}</a> 
                </c:forEach>
                <a class="blog-comment-link" href="<c:url value="/blogs/${blog.id}"/>#comments">comments(${blog.commentCount})</a>
              </div>   
            </div>
            <div class="blog-content">
              ${blog.content}
            </div>
          </div>
        </div>
        
        <security:authorize ifAllGranted="ROLE_ADMIN">
          <a href="<c:url value="/admin/blogs/view/${blog.id}"/>">Admin View</a>
        </security:authorize>
        
        <div class="comment-list">
        </div>
        
        <div class="new-comment">
          <p><a name="new-comment"></a></p>
          <h3 class="sub-title">New Comment</h3>
          <!-- <hr class="separator"> -->
          <div class="form">
          <div class="triangle-top"></div>
          <form id="commentForm" action="/blogs/${blog.id}/comments" method="post">
            <p class="error" style="display:none">fill following fields marked with red color<p>
            <p>
              <input type="text" id="publisherName" name="publisherName" size="35" tabindex="1"/>
              <label>Name <span>*</span></label>
            </p> 
            <p>
              <input type="text" id="publisherEmail" name="publisherEmail" size="35" tabindex="2"/>
              <label>Email <span>*</span> (will not be published)</label>
            </p>
            <p>
              <input type="text" id="publisherWebsite" name="publisherWebsite" size="35" tabindex="3"/>
              <label>Website</label>
            </p>
            <p>
              <textarea id="content" name="content" rows="10" cols="100%" tabindex="4"></textarea>
            </p>
            <p>
              <input id="commentSubmit" type="submit" value="comment"/>
            </p>
          </form> 
          </div> 
        </div>
        
      </div>
      
      <div class="sidebar">
      </div>
    </div>
    
    <jsp:include page="templates/footer.jsp"></jsp:include>

</div>
    
</body>

</html>
